<template>
	<view class="franchisee" :class='equipment'>
		<view class="franchisee_box">
			<view class="box2" v-if="active === 0">
				<view class="box2_item">
					<view class="box2_item_title">
						商户名称
					</view>
					<view class="box2_item_box">
						<input type="text" v-model="merchname" placeholder="请输入商户名称" />
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						经营类目
					</view>
					<view class="box2_item_box">
						<picker @change="bindPickerChange" :range="salecateArray">
							<p :style="salecateName === '请选择经营类目'?'color:grey':'color:#333'">{{salecateName}}</p>
						</picker>
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						联系人
					</view>
					<view class="box2_item_box">
						<input type="text" v-model="realname" placeholder="请输入联系人" />
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						联系电话
					</view>
					<view class="box2_item_box">
						<input type="text" v-model="mobile" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						商户详细地址
					</view>
					<view class="box2_item_box">
						<input type="text" v-model='address' placeholder="请输入商户详细地址" />
						<uni-icons type="location" size="24" style="padding: 0 20rpx;" @click="dingwei"></uni-icons>
					</view>

				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						营业起始时间
					</view>
					<view class="box2_item_box">
						<picker mode="time" :value="startTime" @change="startbindTimeChange">
							<p :style="startTime === '请选择营业起始时间'?'color:grey':'color:#333'">{{startTime}}</p>
						</picker>
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						营业结束时间
					</view>
					<view class="box2_item_box">
						<picker mode="time" :value="finishTime" @change="finishbindTimeChange">
							<p :style="finishTime === '请选择营业结束时间'?'color:grey':'color:#333'">{{finishTime}}</p>
						</picker>
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						商家简介
					</view>
					<view class="box2_item_box">
						<input type="text" v-model="shop_desc" placeholder="请输入商家简介" />
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						营业执照
					</view>
					<view class="box2_item_box">
						<view class="box2_item_box_UP" @click="chooseImage(1)">
							<uni-icons v-if='!imgurl' type="plusempty" color="#f0f1f5" size="60"></uni-icons>
							<image v-if="imgurl" :src="imgurl" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						商户Logo
					</view>
					<view class="box2_item_box">
						<view class="box2_item_box_UP" @click="chooseImage(2)">
							<uni-icons v-if="!logo" type="plusempty" color="#f0f1f5" size="60"></uni-icons>
							<image v-if="logo" :src="logo" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="box2_item">
					<view class="box2_item_title">
						门店照片
					</view>
					<view class="box2_item_box">
						<view class="box2_item_box_UP" @click="chooseImage(3)">
							<uni-icons v-if="!mendianzhaopai" type="plusempty" color="#f0f1f5" size="60"></uni-icons>
							<image v-if="mendianzhaopai" :src="mendianzhaopai" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="box2_item" @click="api_index_merch_submitFun"
					style="background: linear-gradient(186deg, #ff3232, #ff3232, #ff8719);color: #fff;width: 80%;justify-content: center;margin: 50rpx auto;border-radius: 100rpx;">
					立即提交
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	import {
		api_index_merch_index,
		api_index_merch_submit
	} from '@/api/member.js'
	export default {
		data() {
			return {
				openid: '',
				equipment: '',
				active: 0,
				list1: [{
					title: '公司信息'
				}, {
					title: '营业执照'
				}, {
					title: '提交成功'
				}],

				salecateArray: [],
				salecateArrayIndex: 0,
				salecateArr: '',


				imgurl: '', //营业执照
				merchname: '', //商户名称
				logo: '', //Logo
				mendianzhaopai: '', //门店照片
				salecateName: '请选择经营类目', //经营类目
				salecate: '', // 经营类目ID
				realname: '', // 联系人
				mobile: '', // 电话
				address: '', // 地址
				lng: 0, // 经度
				lat: 0, // 纬度
				// username: '', // 登录账号
				// upass: '', // 密码
				startTime: '请选择营业起始时间', //营业起始时间
				finishTime: '请选择营业结束时间', //营业结束时间
				shop_desc: '', //商家简介
				// trade_status: ''//营业状态
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_merch_indexFun();
					this.GetLocationFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
		},
		methods: {
			GetLocationFun() {
				let _this = this;
				uni.showLoading({
					title: '获取定位',
					mask: false
				});
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res);
						_this.lng = res.longitude; // 经度
						_this.lat = res.latitude // 纬度
						uni.hideLoading();
					},
					fail() {
						_this.showinteraction('获取定位失败');
						uni.hideLoading();
					}
				})
			},
			async api_index_merch_indexFun() {
				let data = await api_index_merch_index(this.openid);
				this.salecateArr = data.category;
				for (let i = 0; i < data.category.length; i++) {
					this.salecateArray.push(data.category[i].catename)
				}
				console.log(this.salecateArray);
			},
			bindPickerChange(e) {
				this.salecate = this.salecateArr[e.detail.value].id;
				this.salecateName = this.salecateArr[e.detail.value].catename;
			},
			startbindTimeChange(e) {
				this.startTime = e.detail.value;
			},
			finishbindTimeChange(e) {
				this.finishTime = e.detail.value;
			},
			async api_index_merch_submitFun() {
				var up = {
					"openid": this.openid,
					"yingyezhizhao": this.imgurl,
					"merchname": this.merchname,
					"logo": this.logo,
					"mendianzhaopai": this.mendianzhaopai,
					"salecate": this.salecate,
					"salecateName": this.salecateName,
					"realname": this.realname,
					"mobile": this.mobile,
					"address": this.address,
					"lat": this.lat,
					"lng": this.lng,
					"trade_time": this.startTime + '~' + this.finishTime,
					"shop_desc": this.shop_desc,
				}

				for (let key in up) {
					if (up[key] === '') {
						this.showinteraction('有值未填写');
						return
					}
					console.log(key);
				}
				// return
				let data = await api_index_merch_submit(up);
				console.log(data);
				if (data.error === 0) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			nextFun(num) {
				if (num === 1) {
					if (this.imgurl !== '') {
						this.active = num;
					} else {
						this.showinteraction('营业执照未上传');
					}
				} else if (num === 2) {

				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},



			dingwei() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: '恒华科技园',
							success: function(e) {
								console.log(e);
								_this.map = uni.createMapContext("map", this);

								this.map.initMarkerCluster({
									enableDefaultStyle: false,
									zoomOnClick: true,
									gridSize: 60,
									complete(res) {
										console.log('initMarkerCluster', res)
									}
								});
								_this.map.on('markerClusterClick', (e) => {
									console.log(e);
								})
								console.log(_this.map = uni.createMapContext("map",
									this));
							},
							complete: (e) => {
								console.log(e);
							}
						});
					}
				});
			},



			chooseImage(flag) {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						let file = res.tempFilePaths;
						var images = []
						var img = ''
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: _this.$BASE_URL +
									'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									img = img + JSON.parse(res.data).url;
									if (flag === 1) {
										_this.imgurl = img;
									} else if (flag === 2) {
										_this.logo = img;
									} else {
										_this.mendianzhaopai = img;
									}
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.App {
		height: 100vh;
	}

	.H5 {
		height: calc(100vh - 88rpx);
	}

	.franchisee {
		width: 100%;
		background-color: #F9F9FB;
		display: flex;
		flex-direction: column;
		overflow-y: auto;


		.franchisee_box {
			// flex: 1;
			width: 100%;

			// .box1 {
			// 	width: 100%;
			// 	height: 100%;
			// 	display: flex;
			// 	flex-direction: column;
			// 	align-items: center;
			// 	padding: 40rpx;

			// 	.box1_button {
			// 		width: 360rpx;
			// 		height: 60rpx;
			// 		line-height: 60rpx;
			// 		text-align: center;
			// 		background: linear-gradient(186deg, #ff3232, #ff3232, #ff8719);
			// 		color: #fff;
			// 		margin-top: 50rpx;
			// 		border-radius: 100rpx;
			// 	}

			// 	.box1_UPLOAD {
			// 		width: 400rpx;
			// 		border: 1rpx solid #f7f7f7;
			// 		margin: 20rpx;

			// 		image {
			// 			width: 100%;
			// 			min-height: 536rpx;
			// 		}
			// 	}

			// 	p {
			// 		text-align: center;
			// 		margin: 20rpx 0;
			// 		font-size: 30rpx;
			// 	}

			// 	span {
			// 		font-size: 30rpx;
			// 		color: #ccc;
			// 	}

			// }

			.box2 {
				width: 100%;
				height: 100%;

				.box2_item {
					padding: 20rpx;
					width: 100%;
					min-height: 80rpx;
					border-bottom: 2rpx solid #f0f1f5;
					display: flex;
					// line-height: 80rpx;
					font-size: 26rpx;
					align-items: center;

					.box2_item_title {
						// width: 200rpx;
						height: 100%;
						text-align: left;
					}

					.box2_item_box {
						flex: 1;
						height: 100%;
						text-align: right;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						input {
							width: 100%;
							height: 100%;
							font-size: 26rpx;
							color: #333;
						}

						.box2_item_box_UP {
							width: 200rpx;
							height: 200rpx;
							border: 2rpx #f0f1f5 solid;
							display: flex;
							align-items: center;
							justify-content: center;
						}


					}
				}
			}





		}

		.franchisee_bottom {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
		}
	}
</style>